import React, { Component } from 'react'
import { Layout, Menu } from 'antd';

import { UploadOutlined,NotificationOutlined, VideoCameraOutlined } from '@ant-design/icons';
const { Sider } = Layout;
const { SubMenu } = Menu;
export default class sideMenu extends Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    
    render() {
        const mumeList=[
            {
                 key:"/home",
                 title:"首页",
                 ico:<NotificationOutlined />,
             }, 
             {
                key:"/user-manage/lis",
                title:"用户管理",
                ico:<NotificationOutlined />,
            }, 
             {
                key:"/right-manage",
                title:"角色管理",
                ico:<NotificationOutlined />,
                children:[
                    {
                        key:"/right-manage/role/list",
                        title:"角色列表",
                        ico:<NotificationOutlined />,
                    }, 
                    {
                        key:"/right-manage/right/list",
                        title:"权限列表",
                        ico:<NotificationOutlined />,
                    }, 
                ]
            }, 
         ]
         const rederMenu=(menuList)=>{
             console.log(menuList)
             return menuList.map(item=>{
                 if(item.children){
                     return <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                        {
                            item.children.map(items=>{

                            })
                        }
                    </SubMenu>
                 }
                 return  <Menu.Item key={item.key}>{item.title}</Menu.Item>
             })
         }
        return (
            <div>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{ height: "100%" }}>
                    <div className="logo" />
                    {/* <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                            <Menu.Item key="9">option9</Menu.Item>
                            <Menu.Item key="10">option10</Menu.Item>
                            <Menu.Item key="11">option11</Menu.Item>
                            <Menu.Item key="12">option12</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                            nav 2
                        </Menu.Item>
                        <Menu.Item key="3" icon={<UploadOutlined />}>
                            nav 3
                        </Menu.Item>
                    </Menu> */}
                    {rederMenu(mumeList)}
                </Sider>
            </div>
        )
    }
}
